<script setup>
import {login} from "@/apis/system/v1/login.js";
import {useRouter} from "vue-router";
import NProgress from 'nprogress';
import {useTokenStore} from "@/store/user.js";
import {Message, Notification} from "@arco-design/web-vue";

const loginForm = ref({
  username: "superadmin",
  password: "superadmin",
});
const loading = ref(false);
const router = useRouter();
const userLogin = (data) => {
  NProgress.start();
  loading.value = !loading.value;
  Message.loading({
    content: "用户登录中，请稍等...",
    duration: 1800,
  });
  setTimeout(() => {
    login(data).then(res => {
      if (res.code !== 200) {
        Message.error(res.message);
        NProgress.done();
      } else {
        const useToken = useTokenStore();
        useToken.setToken(res.result.token);
        Notification.success({
          title: "登录成功",
          content: `你好，${res.result.userInfo.username}`,
        });
        NProgress.done();
        setTimeout(() => {
          // 跳转首页
          router.push("/");
        }, 1000);
      }
    });
    loading.value = !loading.value;
  }, 2000);
};
const remember = () => {
  Message.error("记住不了一点");
}
</script>

<template>
  <div class="jia-form jia-flex-center">
    <img src="/logo.svg" alt="logo">
    <h2>CJia520のAdmin</h2>
    <a-form :model="loginForm" :style="{ width: '300px' }">
      <a-form-item label="用户名" :style="{ animation: 'FadeInDown 2.5s' }">
        <a-input v-model="loginForm.username" placeholder="用户名：superadmin / demo"></a-input>
      </a-form-item>
      <a-form-item label="密码" :style="{ animation: 'FadeInDown 3s' }">
        <a-input v-model="loginForm.password" placeholder="密码：admin / test"></a-input>
      </a-form-item>
      <a-form-item field="isPass" :style="{ animation: 'FadeInDown 3.5s' }">
        <a-checkbox @click="remember">记住密码</a-checkbox>
        <span style="padding-left: 90px; color: #8F5DFF; cursor: pointer">忘记密码</span>
      </a-form-item>
      <a-button :style="{ animation: 'FadeInDown 4s' }" type="primary"
                :loading="loading" @click="userLogin(loginForm)">
        登录
      </a-button>
      <div :style="{ height: '25px' }"></div>
      <a-divider :margin="10" :style="{ animation: 'FadeInDown 4.5s' }">
        <a-tag>快捷登录</a-tag>
      </a-divider>
      <div :style="{ height: '15px' }"></div>
      <a-form-item :style="{ animation: 'FadeInDown 4.5s' }">
        <a-button status="success" size="small">admin</a-button>
        <div :style="{ width: '60px' }"></div>
        <a-button size="small">test</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<style scoped lang="less">
.jia-form {
  position: relative;
  width: 500px;
  height: 100vh;
  flex-direction: column;

  img {
    width: 45px;
    height: 55px;
    animation: FadeInDown 1.5s;
  }

  h2 {
    color: var(--color-text-3);
    font: 700 200% Consolas, Monaco, monospace;
    margin: 15px 0;
    text-transform: uppercase;
    animation: FadeInDown 2s;
  }
}
</style>